身につけておきたいWebサイト高速化テクニック #4｜最適な画像書き出しの基本

みなさんこんにちは、クラスメソッドWeb担当の野中です。
昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 ^*1だそうですね。びっくりです。

さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。

第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。

本題

今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。
前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。

この記事の対象者

• Webデザイナー
• フロントエンドエンジニア
• Webディレクター
• Web担当者

この記事では特にWebデザイナーの方に向けてPhotoshopやIllustrator、Fireworksなどのツールを業務で利用している前提で解説します。
ツールの使い方については解説を省きますのでご了承ください。

画像最適化のポイントのお復習い

前回も紹介しましたが、改めて画像最適化のポイントについて確認しておきましょう。

1. ファイルサイズを抑える
   • 画像形式それぞれの特性を知り適切な画像形式を選択する
   • 人の目にはわからない程度に画質を調整しファイルサイズを削減する
   • ムダなメタデータの削除
2. リクエスト数の削減
   • インラインイメージ
   • CSS Sprite
   • Webフォントアイコンの利用
   • イメージマップ
   • 画像を使わずCSS3で対応
3. レンダリングの負荷を減らす
   • 画像のサイズ（width,height）を指定

今回は「画像形式それぞれの特性を知り適切な画像形式を選択する」をベースに「人の目にはわからない程度に画質を調整しファイルサイズを削減する」「ムダなメタデータの削除」がポイントになります。

1，最適な画像形式を検証

それでは、デザイン時によく利用されるようなアイコン・ボタン・写真を例に最適な画像形式について検証してみましょう。
具体的なイメージを用意し細かなオプションを確認しながらそれぞれの形式を比較します。

1.1，デザインツールについて

環境はPhotoshop CS6（Mac）で解説します。
紹介する内容はデザインやその他の外部要因によって最適な画像形式が異なってきます。あくまでも参考例とし、実際に行う際は必ず自身で確認しながら最適化してみてください。

今回はPhotoshopを使い検証しますが、IllustratorやFireworksでも考え方は同じです。
それぞれのツールで書き出し時に比較をし適切な画像形式で書き出しを行いましょう。

1.2，アルゴリズムや仕様について

画像形式の使い分けは圧縮アルゴリズムや画像形式の仕様を理解した上で適切に書き出しを行うことがベストです。
具体的に解説できれば良いのですが、私は人にわかりやすく解説できるほどのアルゴリズムや各形式の仕様に関する知識を有していないのでこの記事では省かせていただきます。気になる方はご自身で調べてみてください。

画像のサイズを抑えるためにアルゴリズムや画像形式の仕様を気にしすぎるのは本末転倒です。

2，検証：べた塗りアイコン

それでは、このシンプルなアイコンを最適化してみましょう。
この例ではGIF、PNG-8、PNG-32（Photoshop上はPNG-24と表記されていますが、この記事ではPNG-32と表記します。）の書き出しを比較してみます。JPEGは写真向きなのでこの例では候補から外します。

2.1，サンプルアイコン

プレビュー

このブログの背景では色がかぶっていますが、サンプルはグレーのアイコンです。

サイズ

横幅	50px
高さ	50px

2.2，書き出し時のキャプチャ

見た目に大きな違いはありませんね。細かなオプションとファイルサイズを確認してみましょう。

2.3，条件と結果

形式	減色アルゴリズム *2	ディザアルゴリズム *3	色数制限 *4	透明色	マット	段階的表示 *5	メタデータ	ファイルサイズ *6
GIF	特定	誤差拡散法	8	有り	ホワイト	無し	無し	280 Byte
PNG-8	特定	誤差拡散法	8	有り	ホワイト	無し	無し	373 Byte
PNG-32	-	-	-	有り	-	無し	無し	678 Byte

実際に試した設定状態とPhotoshopで書き出しプレビュー時のファイルサイズを表にしてみました。
単純にファイルサイズだけを重視するのであればgif形式が向いるようです。ただし、アルファチャネルを利用しなければならない場合はその限りではありません。
また、圧縮率を考えると画像のキャンバスサイズが大きいほどPNGの方がファイルサイズが小さくなります。

3，検証：グラデーションボタンの書き出し

続いてグラデーションのかかったボタンを試してましょう。
こちらも写真ではないのでJPEGを抜いたGIF、PNG-8、PNG-32を比較したいと思います。

3.1，サンプルボタン

サンプル用のボタンをさくっと作りました。
この例ではボタンのアフォーダンスについては言及しません。CSS Spriteを前提とせずアフォーダンスごとに別々の画像を用意することを前提とします。

イメージ

画像のサイズ

横幅	300px
高さ	100px

3.2，書き出し時のキャプチャ

この程度のグラデーションであれば、GIF・PNG-8でも遜色なく利用できそうですね。
ファイルサイズを見るとアイコンとは違う結果が出ています。

3.3，条件と結果

形式	減色アルゴリズム	ディザアルゴリズム	色数制限	透明色	マット	段階的表示	メタデータ	ファイルサイズ
GIF	特定	誤差拡散法	64	有り	ホワイト	無し	無し	2.861 KB
PNG-8	特定	誤差拡散法	64	有り	ホワイト	無し	無し	1.625 KB
PNG-32	-	-	-	有り	-	無し	無し	3.445 KB

ファイルサイズを見るとGIFよりもPNG-8が軽い結果になりました。
1KB以上違うというのは結構な違いです。また、GIFとPNG-32が0.6KB程度の差となりました。先ほどのアイコンと違いキャンバスのサイズも少し大きくなっているのでPNGの圧縮率の高さが影響してきているのでしょうか。

3.4，PNG-8のカラーテーブル最大色数について

上記でPNG-8が軽い結果になりましたが、最大色数を調整するとどうなるかも確認してみましょう。
この比較では最大色数を32/64/128とします。

比較してみると最大色数32色にした場合グラデーションのムラが目立っています。
64色はぱっと見たところでは気になりませんがよく見ると少しだけムラがあるように思います。128色はとても綺麗ですね。

形式	色数	マット	段階的表示	メタデータ	ファイルサイズ
GIF	32	ホワイト	無し	無し	1.262 KB
GIF	64	ホワイト	無し	無し	1.625 KB
GIF	128	ホワイト	無し	無し	2.043 KB

この3つを比べると128色でもファイルサイズはそれほど重くありませんが、軽微なムラを気にしなければファイルサイズとのバランスを考えると64色がよさそうです。

4，検証：写真

最後に写真の書き出しについて比較します。
できればRAWデータを用意すべきでしたがちょうど良いものがなかったのでJPEGを使います。GIF・JPEG・PNG-32それぞれの形式に再び書き出しファイルサイズを比較してみました。

4.1，サンプル写真

イメージ

画像のサイズ

横幅	960px
高さ	960px

4.2，書き出し時のキャプチャ

拡大してみるとJPEGの8*8ブロックがよくわかりますね。
GIFは色数を最大の256色にしていますが流石に劣化は避けられません。JPEGの場合は非可逆圧縮なのでさらにファイルサイズは抑えられますが、代わりに書き出しを行う度に劣化していきます。PNG-32は見た目上は元画像と差はありません。ただし、可逆圧縮なのでファイルサイズが激増しています。

4.3，条件と結果

比較するまでもありませんが、JPEGのファイルサイズが圧倒的に小さいですね。

形式	減色アルゴリズム	ディザアルゴリズム	色数制限	画質 *7	透明色	マット	段階的表示	メタデータ	ファイルサイズ
GIF	特定	誤差拡散法	256	-	無し	ホワイト	無し	無し	588.6 KB
JPEG （最適化オプションON *8）	-	-	フルカラー	60	無し	ホワイト	無し	無し	189.2 KB
PNG-32	-	-	-	-	有り	-	無し	無し	1.259 MB

4.4，JPEGの画質設定による違い

先ほどの比較でJPEGで書き出した方がファイルサイズが低いことはわかりました。
そこで気になるのがJPEG特有の画質オプションです。

画質オプションをどの程度にするのが良いのか確認してみましょう。
このサンプルでは画質オプションを30/60/90としています。

JPEGの画質設定比較

形式	画質	マット	段階的表示	メタデータ	ファイルサイズ
JPEG	30	ホワイト	無し	無し	123.2 KB
JPEG	60	ホワイト	無し	無し	189.2 KB
JPEG	90	ホワイト	無し	無し	322.9 KB

画質が大きく違うのは30と60ですね。
画質60と90では目で見た画質に大きな違いはありませんが、ファイルサイズには差があります。この例の場合は画質60まで落としても問題ないでしょう。

5，画像に含まれるメタデータについて

画像には著作権情報やExif（撮影時の情報）などのメタデータが含まれています。
Webサイトの場合、これらのメタデータは必要ないことがほとんどです。

5.1，メタデータの確認方法

簡単に確認方法を紹介しておきます。
メタデータは特別なツールを入れなくても確認することができます。

Windows

Windowsはコンテキストメニュー（ファイルを右クリック）のプロパティから確認することができます。

Mac OS

Macの場合は、対象ファイルをプレビューアプリケーションで開きプレビューが開いたらメニューバーのツールから「インスペクタを表示」を選択します。

5.2，Photoshopの書き出し時にメタデータを制御する

これらのメタデータはPhotoshopの場合、Web用に書き出す際に指定できます。

Photoshopのメタデータオプションの選択項目

PhotoshopのWeb用書き出しのメタデータオプションはこの5つです。

• なし
• 著作権情報
• 著作権情報および問い合わせ先
• カメラ情報以外のすべて
• すべて

不要な場合は必ず「なし」を選択しておきましょう。

6，画像の最適化ツール

メタデータの情報量はそれほどではありませんが、Webサイトに読み込む画像の量が増えればそれだけメタデータの量も増えるので、できれば消しておきたいものです。

上記で紹介したようにPhotoshopのWeb用書き出しで制御することができますが、後からまとめて削除したり、より軽量化できる便利なツールも紹介しておきます。

この記事ではこれらのツールを使うことでどの程度削減できるかについては紹介しません。

6.1，Windows版

単純にメタデータを削除するのであればExifEraserが便利です。
軽量化もしたいのであればPNGGauntletを使いましょう。

有名なJPEGminiのWindowsクライアントは準備中（昨日公開されていたようです）のようなので、それまではWeb版をどうぞ。

• ExifEraser
• PNGGauntlet
• JPEGmini Windows（準備中）

6.2，Mac OS版

Macの場合は定番のImageOptimが便利です。
細かなオプションを指定したいのであれば、SmallImageを使いましょう。

• ImageOptim
• SmallImage
• JPEGmini mac

6.3，Webツール

軽量化であればtinyPNGが一番。
tinyPNGはアルファーチャネルをサポートしつつ24bitカラーを8bitインデックスカラーに非可逆圧縮できるツールです。ただし、8bitカラーになるため割り切りが必要です。

• tinyPNG
• JPEGmini（JPEGmini ServerがAWS上で利用できる）
• PunyPNG（GIFにも対応）
• KRAKEN（要チェック）

まとめ

いろいろなタイプのイメージの書き出してを試してタイプに合わせた書き出しの目安を見つけられると手間な書き出し作業も効率的にできるようになります。
なぜ軽くできるのか理解した上で、便利な各種ツールを利用しましょう。

目安となるポイント

• 小さなアイコンはGIF
• グラデーションがかかったボタンはPNG-8（色数が多い場合はPNG-24）
• 写真はJPEG
• アルファーチャネルを利用するならすべてPNG-32（Photoshop上はPNG-24）

実際に最適化した場合としていない場合とを比べると50％から70％前後までファイルサイズを抑えられることもあります。
画像のファイルサイズを抑えることはWebサイトのパフォーマンスを改善するための重要なポイントです。

次回は画像のリクエスト数の削減についてテクニックを紹介したいと思います（ほとんど既出の情報です）。

参考サイト

画像の最適化は随分と昔からある話なのでこの記事よりもより詳しい情報がたくさんあります。
この記事をきっかけにより深い情報にたどりついてもらうことも1つの価値かなと思っています。

GIF関連

• GIFフォーマットの詳細

JPEG関連

• 画質・圧縮率について
• DHT (0xFFC4)　ハフマンテーブル定義
• Clever JPEG Optimization Techniques

PNG関連

• 第 3 章 PNG のスペック一覧
• Clever PNG Optimization Techniques

その他

• Webで使用する画像ファイルの最適化（コマンドラインを使う）
• スマフォサイト制作に必須！画像軽量化ツール・サービスの比較検証まとめ
• 最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
• 色深度

脚注